@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }
}

@layer base {
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes chaoticBlob {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    border-radius: 42% 58% 45% 55% / 60% 30% 70% 40%;
  }
  20% {
    transform: scale(1.2) rotate(20deg);
    border-radius: 53% 47% 60% 40% / 32% 68% 33% 67%;
  }
  40% {
    transform: scale(0.8) rotate(-20deg);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  }
  60% {
    transform: scale(1.1) rotate(10deg);
    border-radius: 30% 70% 50% 50% / 60% 30% 70% 40%;
  }
  80% {
    transform: scale(0.9) rotate(-10deg);
    border-radius: 40% 60% 60% 40% / 50% 50% 30% 70%;
  }
}

@keyframes colorChange {
  0% {
    background: linear-gradient(45deg, #cff4fd, #ebfead, #d1dafa);
    background-size: 200% 200%;
    background-position: left center;
  }
  50% {
    background: linear-gradient(45deg, #ebfead, #d1dafa, #cff4fd);
    background-size: 200% 200%;
    background-position: right center;
  }
  100% {
    background: linear-gradient(45deg, #d1dafa, #cff4fd, #ebfead);
    background-size: 200% 200%;
    background-position: left center;
  }
}

.chaotic-blob {
  animation: chaoticBlob 6s ease-in-out infinite, colorChange 10s linear infinite;
  background-size: 200% 200%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.chaotic-background {
  background: linear-gradient(to right, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  background-size: cover;
  background-blend-mode: multiply;
}
